import EChartsComponent from "./echarts";
import { formatDate } from "@/utils/function";
// import { getBarData } from "@/api/index";
import { useMemo, useState } from "react";
let dateArr = formatDate(new Date(), 7, "d");

export const DataEcharts = (): React.ReactElement => {
  const [barData] = useState<number[]>([]);

  // // 获取柱状图数据
  // const haveBarData = async (): Promise<void> => {
  //   let res: number[] = await getBarData();
  //   setBarData(res);
  // };

  // useEffect(() => {
  //   haveBarData();
  // }, []);
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      right: "0%",
      bottom: "0%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: dateArr,
        axisTick: {
          alignWithLabel: false,
          // 取消网格线
          show: true,
          inside: true,
        },
        // 取消刻度显示
        axisLabel: {
          color: "#fff",
          show: true,
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        min: 0,
        max: 60000,
        type: "value",
        splitLine: {
          show: false,
        },
        color: "#fff",
        axisLabel: {
          fontFamily: "RuiZiZhenYanTi",
          fontSize: "1rem",
          color: "#fff",
        },
      },
    ],
    series: [
      {
        name: "每日收益",
        type: "bar",
        barWidth: "40%",
        data: [10000, 20000, 30000, 40000, 50000, 55000],
        label: {
          show: true,
          position: "top",
          border: false,
          color: "#fff",
        },
        itemStyle: {
          color: {
            type: "linear",
            x: 1,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: "#1e0858", // 起始颜色
              },
              {
                offset: 1,
                color: "#c127b9", // 结束颜色
              },
            ],
            global: false,
          },
        },
      },
    ],
  };

  // 阻止子组件重新渲染
  const mainEcharts = useMemo(() => {
    return <EChartsComponent options={option} height="80%" width="100%" />;
  }, [barData]);

  return <>{mainEcharts}</>;
};
